<template>
    <div class="app-container">
        <div class="filter-container">
            <!--外协单位名称   @keyup.enter.native="handleFilter" 表示按回车进行搜索 handleFilter是搜索方法 -->
            路线名称:
            <el-input v-model="search.SearchItem.line_name" placeholder="路线名称" class="filter-item search_input"
                @keyup.enter.native="handleFilter" />
            起点:
            <el-input v-model="search.SearchItem.line_start" placeholder="起点" class="filter-item search_input"
                @keyup.enter.native="handleFilter" />
            终点:
            <el-input v-model="search.SearchItem.line_end" placeholder="终点" class="filter-item search_input"
                @keyup.enter.native="handleFilter" />
            <!--搜索按钮 icon="el-icon-search" 代表按钮要显示的小图标    @click="handleFilter" 代表点击执行搜索方法 -->
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                搜索
            </el-button>
            <el-button class="filter-item" style="margin-left: 10px" type="primary" icon="el-icon-edit"
                @click="handleCreate">
                添加
            </el-button>

        </div>
        <!--用于显示数据列表的table  -->
        <!-- v-loading="listLoading" 代表是否在加载的时候显示load动画, listLoading是个变量-->
        <!-- :data="list" 把数据list绑定到table-->
        <!-- element-loading-text="加载"   加载的时候显示的文本-->
        <!-- border   是否带有纵向边框-->
        <!-- fit   列的宽度是否自撑开-->
        <!--  highlight-current-row   是否要高亮当前行-->
        <el-table v-loading="listLoading" :data="list" element-loading-text="用户搜索加载" border fit highlight-current-row>
            <!--el-table-column 代表1列 -->
            <!--slot-scope="scope"  vue插槽  参看 https://www.jianshu.com/p/981d37be0307  -->
            <!--{{ scope.row.user_name }} 表示该列绑定数据的 user_name列 -->
            <el-table-column align="center" label="路线名称" min-width="10%">
                <template slot-scope="scope">
                    {{ scope.row.line_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="起点详细信息" min-width="10%">
                <template slot-scope="scope">
                    {{ scope.row.line_start }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="终点详细信息" min-width="10%">
                <template slot-scope="scope">
                    {{ scope.row.line_end }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态" min-width="10%">
                <template slot-scope="scope">
                    {{ scope.row.line_state }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="货主姓名" min-width="10%">
                <template slot-scope="scope"> 
                    {{ scope.row.line_ship_id }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="备注" min-width="10%">
                <template slot-scope="scope"> 
                    {{ scope.row.line_remark }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间" min-width="10%">
                <template slot-scope="scope">
                    {{ scope.row.line_createtime2 }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="是否外协" min-width="10%">
                <template slot-scope="scope"> 
                    {{ scope.row.line_isOutsource }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
                <!--修改按钮 -->
                <!-- slot-scope="{ row, $index }"   row代表数据按钮对应的行,  index代表当前行的下标-->
                <template slot-scope="{ row, $index }">
                    <!-- @click="handleUpdate(row)  点击按钮执行handleUpdate方法,  row:当前行对应的数据-->
                    <el-button type="primary" size="mini" @click="handleUpdate(row)">
                        编辑
                    </el-button>

                    <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页插件-->
        <!--分页是自定义插件  由代码import Pagination from "@/components/Pagination"; 来引入 在下面有引入的代码   -->
        <!--分页插件在下面的 default的 components: { Pagination } 进行引入 代码大约在第160行附近 -->
        <!--v-show="total > 0"  总行数大于0的时候显示分页-->
        <!--:total="total"  总行数绑定total字段-->
        <!--:page.sync="search.page" 绑定当前页字段-->
        <!--:page.sync="search.page" 绑定页长度-->
        <!-- @pagination="searchPageList"   点击分页执行的方法-->`
        <pagination v-show="total > 0" :total="total" :page.sync="search.page" :limit.sync="search.limit"
            @pagination="searchPageList" />
        <!--弹出层-->
        <!--:visible.sync="dialogFormVisible"  是否显示弹出层  dialogFormVisible变量在下面有定义-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <!--表单定义-->
            <!-- ref="adminUserForm"   表单命名,类似于以前的id-->
            <!--:rules="rules"   对应的验证规则, rules 验证规则json 下面有定义-->
            <!--:model="adminUserInfo"   表单绑定的数据模型-->
            <el-form ref="adminUserForm" :rules="rules" :model="adminUserInfo" label-position="left" :inline="true">
                <!--el-row  代表一行-->
                <el-row>
                    <!--:span="12" 代表占一半的地方-->

                    <el-col :span="24">
                        <!--::rules="this.dialogStatus === '1' ? rules.user_name : []"   表示添加的时候才验证用户名是否已经被占用-->
                        <el-form-item label="路线名称:" prop="user_name"
                            :rules="this.dialogStatus === '1' ? rules.user_name : []">
                            <!--v-if="this.dialogStatus === '1'"  vue 的if判断  意思 如果是添加,就显示文本-->
                            <el-input  v-model="adminUserInfo.line_name" />
                            <!-- v-else  vue 的else  和上面的if判断对应-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--\u00a0代表小空格 -->
                        <el-form-item :label="'起\u00a0\u00a0\u00a0\u00a0\u00a0机\u00a0\u00a0\u00a0\u00a0\u00a0点:\u00a0'"
                            >
                            <el-input v-model="adminUserInfo.line_start" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <!--\u00a0代表小空格 -->
                        <el-form-item
                            :label="'终\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0点:\u00a0'"
                            >
                            <el-input v-model="adminUserInfo.line_end" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--\u00a0代表小空格 -->
                        <el-form-item :label="'是否外协\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:\u00a0'"
                            >
                            <el-input v-model="adminUserInfo.line_isOutsource" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--\u00a0代表小空格 -->
                        <el-form-item :label="'货主姓名\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:\u00a0'"
                            >
                            <el-input v-model="adminUserInfo.line_ship_id" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <!--\u00a0代表小空格 -->
                      <el-form-item :label="'状态\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0:\u00a0'"
                          >
                          <el-input v-model="adminUserInfo.line_state" />
                      </el-form-item>
                  </el-col>
                    <el-col :span="24">
                        <!--\u00a0代表小空格 -->
                        <el-form-item
                            :label="'备\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0注:\u00a0'"
                            >
                            <el-input v-model="adminUserInfo.line_remark" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <!-- dialogStatus === '1' 是添加 就执行添加的方法  是修改  就执行修改的方法-->
                <el-button type="primary" @click="dialogStatus === '1' ? addUser() : updateData()">
                    保存
                </el-button>
                <el-button @click="dialogFormVisible = false"> 取消 </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import{getLinePage,AddLine,DeleteLine} from '@/api/LineManage/LineManageindex'//引用用户api
    import Pagination from '@/components/Pagination' // 引入分页
    import { getToken } from '@/utils/auth' // 引入提取token的方法
    const statusOptions = [
    // 申明状态常量
    { key: '1', value: '有效' },
    { key: '0', value: '无效' }
  ]
  // 将statusOptions转换为json对象 { 1 : "有效", 2 : "无效" }
  const statusOptionsKeyValue = statusOptions.reduce((acc, cur) => {
    acc[cur.key] = cur.value
    return acc
  }, {})
  export default {
    name: 'AdminUserManager',
    components: { Pagination },
    filters: {
      // vue的过滤器
      statusFilter(status) {
        //    状态过滤器 用于根据状态返回对应的文本描述
        return statusOptionsKeyValue[status]
      },
      imageUrlFilter(url) { // 头像显示过滤器
        return process.env.VUE_APP_BASE_API + url
      }
    },
    data() {
      // 验证密码
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.adminUserInfo.vpass_word !== '') {
            this.$refs.adminUserForm.validateField('vpass_word')
          }
          callback()
        }
      }
      // 验证验证密码
      var validateVPass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.adminUserInfo.pass_word) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      return {
        list: null,
        listLoading: true,
        total: 0,
        search: {
          page: 1,
          limit: 10,
          OrderBy: 'line_name',
          SearchItem: {}
        },
        imageUpLoadAction: process.env.VUE_APP_File_Upload_API, // 上传文件路径
        imageUpLoadHeaders: {
          'X-Token': getToken() // 从cookie里获取token，并赋值  X-Token ，而不是token
        },
        statusOptions, // 状态集合  这种写法 其实和 statusOptions:statusOptions 是一样的
        dialogFormVisible: false, // 是否显示弹出层
        dialogTitle: '', // 弹出层标题
        dialogStatus: '1', // 等于1 表示是添加操作   不等于1 表示修改操作
        userRoleSelectLoading: false, // 角色搜索下拉框,搜索时的加载特效
        userRoleSelectOptions: [], // 角色下拉列表的选项
        downloadLoading: false, // 导出按钮加载
        adminUserInfo: {
           line_name:'',
           line_start:'',
           line_end:'',
           line_state:'',
           line_ship_id:'',
           line_remark:'',
           line_createtime:new Date(),
           line_isOutsource:''
        },
        rules: {
          // 验证配置
          // 验证
        //   user_full_name: [
        //     { required: true, message: '姓名必须输入', trigger: 'change' }
        //   ],
        //   pass_word: [
        //     { required: true, message: '密码必须输入', trigger: 'change' },
        //     { validator: validatePass, trigger: 'blur' }
        //   ],
        //   vpass_word: [
        //     { required: true, message: '验证密码必须输入', trigger: 'change' },
        //     { validator: validateVPass, trigger: 'blur' }
        //   ],
        //   roleSelectValue: [
        //     { required: true, message: '必须选择用户角色', trigger: 'change' }
        //   ]
        }
      }
    },
    created() {
      this.searchPageList()
    },
    methods: {
      searchPageList() {
        // 搜索方法
        this.listLoading = true // 显示加载效果
        //alert(2)
        getLinePage(this.search).then((response) => {
          // 调用分页接口
          this.list = response.data.data // 将查询结果赋值给list
          this.listLoading = false // 隐藏加载效果
          this.total = response.data.recordsTotal // 赋值总行数
        })
      },
      handleFilter() {
        // 点击搜索
        // 搜索方法
        this.search.page = 1 // 将当前页设置为第一页
        this.searchPageList() // 调用搜索分页方法
      },
      // 角色搜索方法
      roleSearch(key) {
        this.userRoleSelectLoading = true
        const roleSearchObj = {
          page: 1,
          limit: 1000,
          OrderBy: 'role_name',
          SearchItem: { role_name: key }
        }
        getRolePage(roleSearchObj).then((response) => {
          if (response.code === 20000) {
            this.userRoleSelectLoading = false
            this.userRoleSelectOptions = response.data.data
          }
        })
      },
      resetUserinfo() { // 初始化用户对象
        this.adminUserInfo = {
           line_name:'',
           line_start:'',
           line_end:'',
           line_state:'',
           line_ship_id:'',
           line_remark:'',
           line_createtime:new Date(),
           line_isoutsource:''
        }
      },
      handleCreate() {
        // 弹出添加页面
        this.resetUserinfo()
        this.dialogStatus = '1' // 等于1 表示是添加操作   不等于1 表示修改操作
        this.dialogTitle = '添加'
        this.dialogFormVisible = true // 当等于true  弹出层显示
        this.$nextTick(() => {
          this.$refs['adminUserForm'].clearValidate() // 清理验证
        })
      },
      addUser() { // 添加用户方法
        this.$refs['adminUserForm'].validate((valid) => {
          if (valid) {
            AddLine(this.adminUserInfo).then((response) => {
              // this.list.unshift(response.data)
              //  this.total++;
              this.dialogFormVisible = false
              this.searchPageList()
              this.$notify({
                title: '添加成功',
                message: '添加用户成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      handleDelete(row, $index) {
       if(confirm("确定要删除吗?"))
      {
         if (row.line_id) {
            DeleteLine(row.line_id).then((response) => {
          this.dialogFormVisible = false
          this.searchPageList()
          this.$notify({
            title: '删除成功',
            message: '删除常用路线成功',
            type: 'success',
            duration: 2000
          })
        })
      }
      }
    },
      handleUpdate(row) {
        // 修改弹出层
        GetOutsourcePoID(row.os_id).then((r) => {
          if (r.code === 20000) {
            console.log(row);
            // this.$forceUpdate(); //vue 可能因为对象层次多不进行渲染, 调用该方法
            this.adminUserInfo = r.data // 把调用接口返回来的用户数据 赋值给adminUserInfo

            // this.adminUserInfo.roleList.map((item) => {
            //   item.label = item.role_name;
            //   item.key = item.role_id;
            //   item.value = item.role_id;

            //   // item
            //   // return {
            //   //   value: item.role_id,
            //   //   label: item.role_name,
            //   //   key: item.role_id,
            //   //   item
            //   // };
            // });
            this.dialogStatus = '2' // w
            this.dialogFormVisible = true // 显示弹出层
            this.$nextTick(() => {
              this.$refs['adminUserForm'].clearValidate()
            })
            this.$forceUpdate() // vue 可能因为对象层次多不进行渲染, 调用该方法
          }
        })
        // copy obj
      },
      updateData() {
        this.$refs['adminUserForm'].validate((valid) => {
          if (valid) {
            UpdateOutsource(this.adminUserInfo).then((response) => {
              this.dialogFormVisible = false
              this.searchPageList()
              this.$notify({
                title: '修改成功',
                message: '修改用户成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
    }
  }
</script>
<style>
    .search_input {
        width: 200px
    }
</style>